<template>
	<view :style="{ height: !isCollapse ? uiwu.headHeight() + uiwu.statusBar() + 'px' : '' }">
		<view class="w-header-bar" :style="{ height: uiwu.headHeight() + uiwu.statusBar() + 'px' }">
			<view :style="{ height: uiwu.statusBar() + 'px' }" />
			<view class="w-header-bar-title" :style="{ height: uiwu.headHeight() + 'px' }">
				<slot>
					<uiwu-icon v-if="showBack" style="position: relative;z-index: 3;" type="arrowleft" size="22" :color="titleColor" @click="uniBack" />
				</slot>
				<view class="w-header-bar-title-text" :style="{ height: uiwu.headHeight() + 'px', color: titleColor }">{{ title }}</view>
			</view>
			<view :style="{ height: height, background: background ,'background-size':backgroundSize}" class="w-header-bar-background" />
		</view>
	</view>
</template>

<script>
	/** 
	 * uiwu-head-bar 自定义导航栏
	 * @property {String} title 标题 
	 * @property {String} titleColor 标题的颜色包含箭头颜色
	 * @property {String} background 背景同css样式,可放图等等  实例  :background="#ff0"
	 * @property {String} height 高度300rpx 默认的话应该用不上
	 * @property {String} backgroundSize 100% auto  背景图大小
	 * @property {Boolean} showBack 是否显示返回按钮 默认显示
	 * @property {Boolean} isCollapse 是否高度塌陷 默认false
	 */
	export default {
		name:'uiwu-head-bar',
		props: {
			title: {
				default:'',
				type:String
			},
			titleColor: {
				default:'#000',
				type:String
			},
			background: {
				default:'transparent',
				type:String
			},
			height: {
				default: '300rpx',
				type:String
			},
			showBack: {
				default: true,
				type:Boolean
			},
			isCollapse:{
				default: false,
				type:Boolean
			},
			backgroundSize:{
				default: '100% auto',
				type:String
			}
		},
		data() {
			return {};
		},
		methods: {
			uniBack() {
				uni.navigateBack({
					fail: () => {
						uni.reLaunch({
							url: '/pages/index/index'
						});
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.w-header-bar {
		position: fixed;
		z-index: 999;
		left: 0;
		right: 0;
		top: 0;
		overflow: hidden;
	}
	.w-header-bar-background {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
	.w-header-bar-title {
		display: flex;
		align-items: center;
		position: relative;
		padding: 0 10rpx;
	}
	.w-header-bar-title-text {
		flex: 1;
		text-align: center;
		position: absolute;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1;
		font-size: 32rpx;
		font-weight: bold;
	}
</style>
